<template>
  <div class="product-info">
    <div class="product-info-header">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="product-info-content">
      <!-- 分类 -->
      <div class="product-info-clssify">
        <div class="material-classify">
          <div class="material-classify-title">素材分类</div>
          <div class="material-classify-content">
            <div
              :class="[
                'material-classify-content-list',
                classifyIndex == index
                  ? 'material-classify-content-list-active'
                  : '',
              ]"
              v-for="(classify, index) in classifyData"
              :key="index"
              @click="onClassifySelect(classify.offSet, index)"
            >
              {{ classify.title }}
            </div>
          </div>
        </div>
      </div>
      <!-- 主要内容区域 -->
      <div class="product-info-box">
        <div class="product-info-box-title">产品介绍</div>
        <!-- 介绍 -->
        <div class="product-info-box-introduce">
          <div class="product-info-box-introduce-img">
            <Swiper
              :slideshow="infoSlideshow.prototypeResultGroups"
              v-if="
                infoSlideshow.prototypeResultGroups &&
                infoSlideshow.prototypeResultGroups.length
              "
            />
          </div>
          <div class="product-info-box-introduce-content">
            <div
              class="product-info-box-introduce-content-title using-single-drug"
            >
              {{ infoData.name }}
            </div>
            <!-- 售价 -->
            <div class="introduce-content-selling-price">
              <div class="introduce-content-selling-price-title">售价</div>
              <div class="introduce-content-selling-price-name">
                单价:
                <div class="selling-price"><span>￥00.00</span></div>
              </div>
              <div class="introduce-content-selling-price-name">
                单价:
                <div
                  class="selling-price"
                  v-for="(price, priceIdx) in infoData.platform_price"
                  :key="priceIdx"
                >
                  <span>￥{{ price.price }}</span>
                  <span>({{ price.num }})</span>
                </div>
              </div>
            </div>
            <!-- 参数 -->
            <div class="introduce-content-selling-parameter">
              <div class="introduce-content-selling-parameter-title">参数</div>
              <div class="selling-parameter-active">
                <div class="selling-parameter-active-name">
                  材质: <span>{{ infoData.texture }}</span>
                </div>
                <div class="selling-parameter-active-name">
                  生成工艺:
                  <span>{{ infoData.product_details.production_process }}</span>
                </div>
                <div class="selling-parameter-active-name">
                  重量: <span>{{ infoSlideshow.weight }}</span>
                </div>
                <div class="selling-parameter-active-name">
                  发货时效: <span>发货时效</span>
                </div>
              </div>
            </div>
            <!-- 规格 -->
            <div class="introduce-content-selling-specification">
              <div class="selling-specification-title">规格</div>
              <div class="selling-specification-color">
                <div class="selling-specification-color-name">颜色:</div>
                <div class="selling-specification-color-box">
                  <el-color-picker v-model="colorValue"></el-color-picker>
                </div>
              </div>
              <div class="selling-specification-size">
                <div class="selling-specification-size-name">尺寸:</div>
                <div class="selling-specification-size-box">
                  <div
                    :class="[
                      'selling-specification-size-box-list',
                      sizeIndex == sizeIdx
                        ? 'selling-specification-size-box-list-active'
                        : '',
                    ]"
                    v-for="(size, sizeIdx) in infoData.specs"
                    :key="sizeIdx"
                    @click="onSizeCut(size, sizeIdx)"
                  >
                    {{ size.size }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 设计产品按钮 / 收藏产品 -->
        <div class="product-info-box-comfig">
          <div class="product-info-box-comfig-cancel">
            <el-button type="primary" round>设计产品</el-button>
            <el-button
              type="warning"
              icon="el-icon-star-off"
              round
              @click="onCollectProduct"
              >收藏产品</el-button
            >
          </div>
        </div>
        <!-- 产品详情 -->
        <div class="info-detail">
          <div class="info-detail-title">产品详情</div>
          <div class="line-between"></div>
          <div class="info-detail-content">
            <div class="info-detail-content-box">
              <div class="info-detail-content-name">
                中文名称：
                <span>{{ infoData.name }}</span>
              </div>
              <div class="info-detail-content-name">
                <div class="info-detail-content-name-che">
                  产品编号：
                  <span>{{ infoData.sku }}</span>
                </div>
                <div class="info-detail-content-name-che">
                  生成工艺：
                  <span>{{ infoData.product_details.production_process }}</span>
                </div>
              </div>
            </div>
            <div class="info-detail-content-box">
              <div class="info-detail-content-box-name">
                英文名称：
                <span>{{ infoData.english_name }}</span>
              </div>
              <div class="info-detail-content-box-name">
                产品材质：
                <span>{{ infoData.texture }}</span>
              </div>
            </div>
          </div>
          <div class="info-detail-describe">
            <div class="info-detail-describe-title">其他描述</div>
            <div class="info-detail-describe-item">
              【材质说明】<span>{{
                infoData.product_details.material_description
              }}</span>
            </div>
            <div class="info-detail-describe-item">
              【产品性能】<span>{{
                infoData.product_details.product_performance
              }}</span>
            </div>
            <div class="info-detail-describe-item">
              【使用说明】<span>{{
                infoData.product_details.applicable_scenarios
              }}</span>
            </div>
            <div class="info-detail-describe-item">
              【洗涤说明】<span>{{
                infoData.product_details.washing_instructions
              }}</span>
            </div>
            <div class="info-detail-describe-item">
              【特别说明】<span>{{
                infoData.product_details.special_description
              }}</span>
            </div>
            <div class="info-detail-describe-item">
              【温馨提示】<span>{{ infoData.product_details.reminder }}</span>
            </div>
          </div>
        </div>
        <!-- 设计说明 -->
        <div class="info-explain">
          <div class="info-explain-title">设计说明</div>
          <div class="line-between"></div>
          <div class="info-explain-box">
            <div class="info-explain-box-list">
              设计说明：
              <span>{{ infoData.product_details.design_explanation }}</span>
            </div>
            <div class="info-explain-box-list">
              设计区域：
              <span>{{ infoData.product_details.design_area }}</span>
            </div>
            <div class="info-explain-box-list">
              图片要求：
              <span>{{ infoData.product_details.picture_request }}</span>
            </div>
          </div>
        </div>
        <!-- 产品尺寸 -->
        <div class="info-size">
          <div class="info-size-title">
            <div class="info-size-title-name">产品尺寸</div>
            <div class="info-size-title-copy">复制表格</div>
          </div>
          <div class="line-between"></div>
          <div class="info-size-box">
            <table>
              <thead class="table-thead">
                <tr>
                  <th
                    class="table-cell"
                    v-for="(sizeHeade, sizeIdx) in sizeHeadeData"
                    :key="sizeIdx"
                  >
                    <div>{{ sizeHeade.content }}</div>
                    <div>{{ sizeHeade.remark }}</div>
                  </th>
                </tr>
              </thead>
              <tbody class="table-tbody">
                <tr
                  class="table-row"
                  v-for="(sizeChild, sizeChildIdx) in sizeData"
                  :key="sizeChildIdx"
                >
                  <td
                    class="table-cell"
                    v-for="(child, childIdx) in sizeChild"
                    :key="childIdx"
                  >
                    {{ child.content }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 包装规格 -->
        <div class="info-size info-size-collect">
          <div class="info-size-title">
            <div class="info-size-title-name">包装规格</div>
            <div class="info-size-title-copy">复制表格</div>
          </div>
          <div class="line-between"></div>
          <div class="info-size-box">
            <table>
              <thead class="table-thead">
                <tr>
                  <th
                    class="table-cell"
                    v-for="(sizeHeade, sizeIdx) in specificationHeadeData"
                    :key="sizeIdx"
                  >
                    <div>{{ sizeHeade.content }}</div>
                    <div>{{ sizeHeade.remark }}</div>
                  </th>
                </tr>
              </thead>
              <tbody class="table-tbody">
                <tr
                  class="table-row"
                  v-for="(sizeChild, sizeChildIdx) in specificationData"
                  :key="sizeChildIdx"
                >
                  <td
                    class="table-cell"
                    v-for="(child, childIdx) in sizeChild"
                    :key="childIdx"
                  >
                    {{ child.content }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import Swiper from '@/components/Swiper';
import Product from '@/api/product';
import { MessageBox } from 'element-ui';
import Way from '@/utils/way';

export default {
  name: 'ProductInfo',
  components: { Breadcrumb, Swiper },
  props: {},
  data() {
    return {
      headerTitle: ['产品市场', '产品详情'], // 面包屑
      classifyData: [
        { title: '产品介绍', offSet: 'info-detail' },
        { title: '产品详情', offSet: 'info-explain' },
        { title: '设计说明', offSet: 'info-size' },
        { title: '包装规格', offSet: 'info-size-collect' },
      ],
      classifyIndex: 0,
      colorValue: '#409EFF', // 颜色选择模板
      sizeIndex: 0,
      infoData: {
        product_details: {
          production_process: '',
        },
      }, // 素材详情
      infoSlideshow: {}, // 轮播图
      sizeHeadeData: [], // 尺寸头部
      sizeData: [], // 尺寸body
      specificationHeadeData: [], // 规格头部
      specificationData: [], // 规格body
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getProductInfo(this.$route.query.id);
  },
  methods: {
    // 尺寸切换
    onSizeCut(item, index) {
      this.sizeIndex = index;
      this.infoSlideshow = item;
    },

    // 获取产品详情
    getProductInfo(id) {
      const that = this;
      let list = [];
      let specificationList = [];
      Product.getProductInfo({ id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.infoData = res.data;
          that.infoSlideshow = res.data.specs[that.classifyIndex];
          that.colorValue = res.data.specs[that.classifyIndex].color.color;
          const product_size = res.data.product_details.product_size;
          list = JSON.parse(JSON.stringify(product_size));
          that.sizeHeadeData = product_size[0];
          list.shift();
          that.sizeData = list;

          const specification =
            res.data.product_details.packaging_specification;
          specificationList = JSON.parse(JSON.stringify(specification));
          that.specificationHeadeData = specification[0];
          specificationList.shift();
          that.specificationData = specificationList;
        } else {
          MessageBox.confirm(res.msg + ' 返回上一页', '提示', {
            confirmButtonText: '确定',
            // cancelButtonText: '取消',
            showCancelButton: false,
            type: 'warning',
          })
            .then(() => {
              that.$router.back();
            })
            .catch(() => {});
        }
      });
    },

    // 素材分类
    onClassifySelect(offSet, index) {
      this.classifyIndex = index;
      document.querySelector('.' + offSet).scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'end',
      });
    },

    // 收藏产品
    onCollectProduct() {
      const that = this;
      Product.getCollectProductInfo({ id: that.infoData.id }).then((res) => {
        if (res.code == 200) {
          Way.setMessage('收藏成功', 1);
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/left-side-180.less';
.product-info {
  .product-info-header {
    padding: 10px 0;
  }
  .product-info-content {
    display: flex;

    // 分类
    .product-info-clssify {
      width: 180px;
      margin-right: 24px;
    }
    // 主要内容区域
    .product-info-box {
      flex: 1;
      padding-bottom: 30px;

      .product-info-box-title {
        font-size: 16px;
        font-weight: 700;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #f1f1f1;
      }

      // 介绍
      .product-info-box-introduce {
        display: flex;
        padding-top: 15px;

        .product-info-box-introduce-img {
          margin-right: 24px;
          width: 350px;
        }
        .product-info-box-introduce-content {
          .product-info-box-introduce-content-title {
            width: 620px;
            padding-bottom: 20px;
          }
          // 售价
          .introduce-content-selling-price {
            padding: 15px 20px;
            background-color: #f8f8f8;

            .introduce-content-selling-price-title {
              font-weight: 700;
              font-size: 14px;
              padding-bottom: 10px;
            }
            .introduce-content-selling-price-name {
              display: flex;
              padding: 5px 0;
              font-size: 14px;
              color: #999;

              .selling-price {
                display: flex;
                flex-direction: column;
                padding: 0 20px 0 15px;

                span {
                  color: #00091a;

                  &:nth-child(2) {
                    color: #999;
                  }
                }
              }
            }
          }

          // 参数
          .introduce-content-selling-parameter {
            margin-top: 20px;
            padding: 15px 20px;
            background-color: #f8f8f8;

            .introduce-content-selling-parameter-title {
              font-weight: 700;
              font-size: 14px;
              padding-bottom: 10px;
            }
            .selling-parameter-active {
              display: flex;
              flex-wrap: wrap;
              color: #999;
              font-size: 14px;

              .selling-parameter-active-name {
                padding-right: 20px;
                span {
                  padding-left: 15px;
                  color: #00091a;
                }
              }
            }
          }
          // 规格
          .introduce-content-selling-specification {
            margin-top: 20px;
            padding: 15px 20px;
            background-color: #f8f8f8;

            .selling-specification-title {
              font-weight: 700;
              font-size: 14px;
              padding-bottom: 10px;
            }

            .selling-specification-color,
            .selling-specification-size {
              display: flex;
              align-items: center;
              padding: 5px 0;
              color: #999;
              font-size: 14px;

              .selling-specification-size-name,
              .selling-specification-color-name {
                width: 40px;
              }

              .selling-specification-color-box {
                padding-left: 15px;
              }
              .selling-specification-size-box {
                padding-left: 15px;
                display: flex;
                flex-wrap: wrap;
                flex: 1;

                .selling-specification-size-box-list {
                  margin-right: 10px;
                  margin-bottom: 10px;
                  cursor: pointer;
                  padding: 6px 30px;
                  text-align: center;
                  border: 1px solid #c9c9c9;
                  border-radius: 4px;
                  font-size: 14px;
                  color: #00091a;
                }
                .selling-specification-size-box-list-active {
                  padding: 6px 30px;
                  background: #c9c9c9;
                  border: 1px solid #c9c9c9;
                  border-radius: 4px;
                  font-size: 14px;
                  color: #00091a;
                }
              }
            }
          }
        }
      }

      // 设计产品按钮 / 收藏产品
      .product-info-box-comfig {
        display: flex;
        justify-content: center;
        margin-top: 30px;
      }

      // 产品详情
      .info-detail {
        margin-top: 20px;

        .info-detail-title {
          font-size: 20px;
          font-weight: 700;
          height: 50px;
          line-height: 50px;
        }

        .info-detail-content {
          display: flex;
          padding-top: 24px;

          .info-detail-content-box {
            flex: 1;
            color: #999;
            .info-detail-content-name {
              display: flex;
              padding: 5px 0;

              .info-detail-content-name-che {
                flex: 1;
              }
              span {
                color: #00091a;
              }
            }
            .info-detail-content-box-name {
              padding: 5px 0;
              span {
                color: #00091a;
              }
            }
          }
        }
        .info-detail-describe {
          .info-detail-describe-title {
            padding: 24px 0 12px 0;
            font-weight: 700;
            color: #999;
          }
          .info-detail-describe-item {
            padding: 5px 0;
            color: #999;
            span {
              color: #00091a;
            }
          }
        }
      }

      // 设计说明
      .info-explain {
        margin-top: 20px;

        .info-explain-title {
          font-size: 20px;
          font-weight: 700;
          height: 50px;
          line-height: 50px;
        }
        .info-explain-box {
          padding-top: 12px;

          .info-explain-box-list {
            padding: 5px 0;
            color: #999;
            span {
              color: #00091a;
            }
          }
        }
      }
      // 产品尺寸
      .info-size {
        margin-top: 20px;

        .info-size-title {
          display: flex;
          justify-content: space-between;
          font-size: 20px;
          font-weight: 700;
          height: 50px;
          line-height: 50px;

          .info-size-title-copy {
            font-weight: 400;
            font-size: 16px;
            cursor: pointer;
          }
        }
        .info-size-box {
          padding-top: 20px;

          table {
            width: 100%;
            border-left: 1px solid #f0f0f0;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;

            .table-thead {
              box-sizing: border-box;

              tr {
                display: flex;
                font-size: 14px;
                color: #666666;
                background-color: #fafafa;

                .table-cell {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  padding: 15px 0;
                  font-weight: normal;
                  color: black;
                  border-right: 1px solid #f0f0f0;
                }
              }
            }

            .table-tbody {
              .table-row {
                display: flex;
                font-size: 14px;
                color: #666666;
                background-color: #fff;

                .table-cell {
                  flex: 1;
                  padding: 10px 0;
                  text-align: center;
                  font-weight: normal;
                  color: black;
                  border-right: 1px solid #f0f0f0;
                }
              }
              .table-row:nth-child(2n) {
                background-color: #fafafa;
              }
            }
          }
        }
      }
    }
  }
}
</style>
